<!doctype html>
<html class="no-js">
<style>
	#vld-tooltip {
		position: absolute;
		z-index: 1000;
		padding: 5px 10px;
		background: #F37B1D;
		min-width: 150px;
		color: #fff;
		transition: all 0.15s;
		box-shadow: 0 0 5px rgba(0,0,0,.15);
		display: none;
	}

	#vld-tooltip:before {
		position: absolute;
		top: -8px;
		left: 50%;
		width: 0;
		height: 0;
		margin-left: -8px;
		content: "";
		border-width: 0 8px 8px;
		border-color: transparent transparent #F37B1D;
		border-style: none inset solid;
	}
</style>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>AC</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="stylesheet" href="static/css/amazeui.min.css">
  <link rel="stylesheet" href="static/css/app.css">
</head>
<body>
<div class="am-g">
	<!-- LOGO -->
	<div class="am-u-sm-12 am-text-center" >
		 <i class="am-icon-twitch myapp-login-logo"></i>
	</div>
	<!-- 登陆框 -->
	<div class="am-u-sm-11 am-u-sm-centered">
	<form class="am-form" action="/ac/loginAc" id="login-vld">
	  <fieldset class="myapp-login-form am-form-set">
		<div class="am-form-group am-form-icon">
			<i class="am-icon-user"></i>
			<input type="text" name="username" class="myapp-login-input-text am-form-field" placeholder="请输入您的账号" data-foolish-msg="请输入您的账号"  required="required" >
		</div>
	    <div class="am-form-group am-form-icon">
			<i class="am-icon-lock"></i>
			<input type="password" name="userpassword" class="myapp-login-input-text am-form-field" placeholder="请输入您的密码" data-foolish-msg="请输入您的密码"  required="required" >
		</div>
	  </fieldset>
	  <button type="submit"  class="myapp-login-form-submit am-btn am-btn-primary am-btn-block ">登 陆</button>
	</form>
	</div>
	<div class="am-text-center am-u-sm-11 am-u-sm-centered myapp-login-form-shortcut">
		<hr class="myapp-login-form-hr" />
		<span class="myapp-login-form-hr-font">第三方登陆</span>
	</div>

	<div class="am-u-sm-12 am-text-center myapp-login-form-listico" >
		 <div class="am-u-sm-4 am-text-center" >
		 <i class="am-icon-btn am-primary am-icon-qq"></i>
		 </div>
		 <div class="am-u-sm-4 am-text-center" >
		 <i class="am-icon-btn am-danger am-icon-weibo"></i>
		 </div>
		 <div class="am-u-sm-4 am-text-center" >
		 <i class="am-icon-btn am-success am-icon-weixin"></i>
		 </div>
	</div>

</div>
<!--<div
  class="am-slider am-slider-default"
  data-am-flexslider="{controlNav: 'thumbnails', directionNav: false, slideshow: false}">
  <ul class="am-slides">
    <li data-thumb="http://s.amazeui.org/media/i/demos/pure-4.jpg?imageView2/0/w/360">
      <img src="http://s.amazeui.org/media/i/demos/pure-4.jpg" /></li>
  </ul>
</div>-->
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="static/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="static/js/amazeui.min.js"></script>
<script src="static/js/app.js"></script>
<script>
    $(function () {

        var $form = $('#login-vld');
        var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
        $tooltip.appendTo(document.body);

        $form.validator({
            validateOnSubmit: true,
            submit: function() {

                if(this.isFormValid()) {

                    $.ajax({ url: "/ac/loginAc",  data:{
                        username:'1',
                        userpassword:'1'
                    } , success: function(data){

                    }});
                }
                return false;
            }
        });


        var validator = $form.data('amui.validator');

        $form.on('focusin focusout', '.am-form-error input', function(e) {
            if (e.type === 'focusin') {
                var $this = $(this);

                var offset = $this.offset();
                var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

                $tooltip.text(msg).show().css({
                    left: offset.left + 10,
                    top: offset.top + $(this).outerHeight() + 10
                });
            } else {
                $tooltip.hide();
            }
        });







    })

</script>
</body>
</html>